import * as turf from "@turf/turf";
import * as THREE from "three";
import { offsetXY } from "./offsetXY";
import { useTresContext, useRenderLoop } from "@tresjs/core";
import { getRandomNumber } from "chendaxianutils";
import { getColor } from "./colors";
const { onLoop } = useRenderLoop();

const lineMaterials: THREE.MeshBasicMaterial[] = [];
//递归扁平化coordinates
//将coordinates数组扁平化
type result = GeoJSON.Feature<GeoJSON.Polygon | GeoJSON.MultiPolygon>;
/**
 * 1、绘制形状
 *
 */
const createMesh = (coordinates: number[][]) => {
  const shape = new THREE.Shape();
  for (let index = 0; index < coordinates.length; index++) {
    const position = coordinates[index];
    const [x, y] = offsetXY(position)!;
    if (index === 0) {
      shape.moveTo(x, -y);
    } else {
      shape.lineTo(x, -y);
    }
  }
  const shapeGeometry = new THREE.ShapeGeometry(shape);
  const material = new THREE.MeshBasicMaterial({
    color: getColor(),
    side: THREE.DoubleSide,
  });
  const mesh = new THREE.Mesh(shapeGeometry, material);

  return mesh;
};
/**
 * 描边
 * 2、周围描边
 */
const createLine = (coordinates: number[][]) => {
  /**
   * 曲线
   */
  const curve = new THREE.CatmullRomCurve3(
    coordinates.map((item) => new THREE.Vector3(...offsetXY(item)!, 0))
  );
  /**
   * 管道渲染  uv纹理位置移动效果
   */
  const tubrGeometry = new THREE.TubeGeometry(curve, 100, 0.1, 20);
  /**
   * 管道位置
   */

  /**
   * 管道内壁循环移动
   */
  const texture = new THREE.TextureLoader().load(
    new URL(
      `../../../assets/line/line${getRandomNumber(1, 12)}.png`,
      import.meta.url
    ).href,
    function (tex) {
      tex.needsUpdate = true;
      tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
      tex.repeat.set(1, 1);
    }
  );
  const material = new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.DoubleSide,
    transparent: true,
  });
  lineMaterials.push(material);
  const Line = new THREE.Mesh(tubrGeometry, material);

  return Line;
};

/**
 *
 * @param data
 * @returns
 */
export const renderMap = (array: result[], Object: THREE.Object3D) => {
  for (let index = 0; index < array.length; index++) {
    const element = array[index];
    const unit = new THREE.Object3D();
    const { coordinates, type } = element.geometry;
    for (let indexx = 0; indexx < coordinates.length; indexx++) {
      const coordinate = coordinates[indexx];
      const fn = (coordinate: number[][]) => {
        const mesh = createMesh(coordinate);
        const lineMesh = createLine(coordinate);
        /**
         * 平面添加
         */
        unit.add(mesh);
        /**
         * 绘制线条
         */
        unit.add(lineMesh);
      };
      if (type === "Polygon") {
        fn(coordinate as number[][]);
      }
      if (type === "MultiPolygon") {
        for (let indexxx = 0; indexxx < coordinate.length; indexxx++) {
          const element = coordinate[indexxx];
          fn(element as number[][]);
        }
      }
    }
    Object.add(unit);
  }
};
/**
 * 动画
 */
onLoop(() => {
  for (let index = 0; index < lineMaterials.length; index++) {
    const element = lineMaterials[index];
    if (element!.map!.offset.x > 10000) {
      element!.map!.offset.x = 0;
    }
    element!.map!.offset.x += 0.005;
  }
});
